<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向对齐属性【文本与图片对齐】</title>
		<!-- 垂直方向对齐属性  vertical-align
		     使用方法：1.用于表格中单元格垂直居中
			          2.用于行内元素以及行内块元素的垂直居中
					    【文本和图片垂直居中(对齐)效果】
						 对齐分为四种：基线对齐，顶部对齐，中间对齐，
						              底部对齐
				元素种类：块元素，行元素，行内块元素		 
		        块元素特点：独占一行，可设置宽高
				行元素特点：一行内显示，不可设置宽高
				网页：元素之间嵌套生成
				行元素与块元素可以任意嵌套吗
				前提：设置宽高---行套块   ×
				             ---块套块   √  
							 ---块套行   √
				前提：一行内显示---行套块  √
							   ---块套块  ×
							   ---块套行  √
							   ---行套行  √
				行内块元素特点：
		 -->
		 <style>
			 .k1{vertical-align: baseline;}
			 
			 .k2{vertical-align: top;}
			 
			 .k3{vertical-align: middle;}
			 
			 .k4{vertical-align: bottom;}
			 
		 </style>
	</head>
	<body>
		<!-- 需求结构：4个p ，嵌套文字： 图片叫什么名字
		                      文字后加img，设定宽高：25~100px
							   -->
			<h1>文本与图片垂直属性</h1>
			<p>transparent<img class="k1" src="img/tranparent.jpg" alt="雪景" width="270px" height="70px">基线对齐</p>	
            <p>red<img class="k2" src="img/red.jpg" alt="秋天枫叶" width="270px" height="70px">顶部对齐</p>	
			<p>blue<img class="k3" src="img/blue.jpg" alt="蓝天" width="270px" height="70px">中间对齐</p>
			<p>glad<img class="k4" src="img/glad.jpg" alt="夕阳" width="270px" height="70px">底部对齐</p>
	</body>
</html>